<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/angular.min.js"></script>
<script type="text/javascript" src="./js/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css"> 
<style>
.panel{width:60%;margin:0 auto;text-align: center;}
.form-inline{width:60%;margin:0 auto;}
</style>
</head>	
<body>
<div class="main" ng-app="myApp" ng-controller="myAppController">
	<ul class="list">
		<li ng-repeat="x in datas">
			{{x.order}}----{{x.module}}----{{x.message}}----{{x.time}}
		</li>
	</ul>
	<div class="pageList">
		<!-- 参数说明：
		boundary-links：是否显示 首页 末页
		max-size：显示多少页
		boundary-link-numbers：是否显示总页数
		 -->
		<uib-pagination 
			total-items="page.totalCount" 
			ng-model="page.pageNo" 
			max-size="2" 
			class="samplePage pagination" 
			boundary-links="false"
			force-ellipses="false"
			first-text="首页" 
			last-text="末页" 
			previous-text="上一页"
			next-text="下一页" 
			items-per-page="page.limit"
			ng-change="pageChanged()" 
			boundary-link-numbers="true"
			>
		</uib-pagination>
	</div>
</div>
<script type="text/javascript"> 
var myApp = angular.module("myApp",["ui.bootstrap"]);
var data = [];
for(var i=0; i<100; i++){
	var curJson = {};
	var sum = i+1;
	curJson.order = sum;
	curJson.module = "模块"+sum;
	curJson.message = "信息"+sum;
	curJson.time = "2017-02-02";
	data.push(curJson);
};
var allJson = {'total':100,'data':data};
// var allJson = {"total":20,"data":[
// 	{
//       "order":10,
//       "module":"模块1",
//       "message":"信息1",
//       "time":"2016-07-02"
//     }]
// };
myApp.controller("myAppController",['$scope',function($scope){
	//总条数
	$scope.total = allJson.total;
	//反转函数转化abcd转dcba
	// $scope.data = allJson.data.reverse();
	$scope.data = allJson.data;
	//选择显示的条数
	$scope.values = [{"limit":5},{"limit":2},{"limit":3}];
	//默认显示的条数  这里显示条数是要传递{"limit":5}这个数组 
	$scope.selectedLimit=$scope.values[0]; 
	//默认显示当前页数
	$scope.currentPage = 1;
	if($scope.data != null){
    	$scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.currentPage-1),$scope.selectedLimit.limit*$scope.currentPage);
    }else{
    	alert($scope.data);
    };
    $scope.page = {"limit":$scope.selectedLimit.limit,"pageSize":3,"pageNo":$scope.currentPage,"totalCount":$scope.total};
	$scope.pageChanged = function(){
		$scope.page.limit = $scope.selectedLimit.limit;
		$scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.page.pageNo-1),$scope.selectedLimit.limit*$scope.page.pageNo);
	};
	$scope.setPage = function (go){
		$scope.length = Math.ceil($scope.total/$scope.selectedLimit.limit);
		console.log($scope.length);
		if(go > $scope.length){
			$scope.page.pageNo =  $scope.length;
				console.log($scope.length);
		}else{
				$scope.page.pageNo=go; 
		};
		$scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.page.pageNo-1),$scope.selectedLimit.limit*$scope.page.pageNo);
	};
}]);
</script>
</body>
</html>